<template>
	<el-collapse v-model="activeNames" @change="handleChange">
		<el-collapse-item v-for="(tool, index) in list" :key="index">
			<template #title>
				<tool-item :border="false" :tool="tool"></tool-item>
			</template>
			<template #default>
				<tool-item @add="addTool" v-for="(item, i) in tool.list" :Children="true" :tool="item" :key="i"></tool-item>
			</template>
		</el-collapse-item>
	</el-collapse>
</template>
  
<script>
import toolItem from './toolItem.vue';
export default {
components: {
	toolItem
},
props: {
    list: {
        type: Object,
        default: () => {}
    },
},
data() {
	return {};
},
methods: {
	addTool(tool) {
		this.$emit("addTool",tool)
	}
}
};
</script>
  
<style scoped lang="scss">
::v-deep .el-collapse-item__header{
	height: 146px;
	line-height: 1.6;
}
::v-deep .el-collapse-item.is-active{
	background-color: #eee !important;
}
::v-deep .el-collapse-item__wrap{
	background: none;
}
</style>